<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收费统计</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    option = {
        legend: {"top": "20",right:"60"},
        tooltip: {},
        color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
        dataset: {
            dimensions: ['product', '会计基础培训', '会计中级培训', '会计实际应用', '会计高级培训'],
            source: [
                {
                    product: '第一学期',
                    会计基础培训: 105,
                    会计中级培训: 223,
                    会计实际应用: 89,
                    会计高级培训: 163,
                },
                {
                    product: '第二学期',
                    会计基础培训: 246,
                    会计中级培训: 336,
                    会计实际应用: 126,
                    会计高级培训: 87,
                },
                {
                    product: '第三学期',
                    会计基础培训: 188,
                    会计中级培训: 108,
                    会计实际应用: 189,
                    会计高级培训: 103,
                },
            ],
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [
            {
                type: 'bar',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 6,
                    },
                },
            },
            {
                type: 'bar',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 6,
                    },
                },
            },
            {
                type: 'bar',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 6,
                    },
                },
            },
            {
                type: 'bar',
                barWidth: '10%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 6,
                    },
                },
            },
        ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>